import React, { useState } from 'react';
import { Form, message, Modal, Spin, Radio } from 'antd';

import { isSuccess } from '@/utils/request';
import If from '@/components/If';

import { dealWith } from '@/services/salaryManage/salaryConfirm';
import LimitInput from '@/components/LimitInput';
import { feedbackProblemTypeEnum } from '@/pages/SalaryManage/enum';

const problemTypeList = feedbackProblemTypeEnum.list();

const DealWithModal = React.memo(
    Form.create()(({ form, visible, onOk, onCancel, model }) => {
        const [loading, setLoading] = useState(false);
        const handleOk = () => onOk(form.getFieldsValue(), form, model, setLoading);
        return (
            <Modal
                title="结果记录"
                visible={visible}
                okText="确认"
                onOk={handleOk}
                cancelText="取消"
                onCancel={onCancel}
                confirmLoading={loading}
            >
                <Spin spinning={loading}>
                    <Form layout="horizontal" labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
                        <Form.Item label="问题类型">
                            {form.getFieldDecorator('problemType', {
                                initialValue: model.problemType ?? problemTypeList[1].value,
                                rules: [{ required: true, message: '请选择问题类型' }]
                            })(
                                <Radio.Group>
                                    {problemTypeList.map(type => (
                                        <Radio key={type.value} value={type.value}>
                                            {feedbackProblemTypeEnum.getShowName(type.value)}
                                        </Radio>
                                    ))}
                                </Radio.Group>
                            )}
                        </Form.Item>
                        <Form.Item label="处理结果">
                            {form.getFieldDecorator('respondContent', {
                                initialValue: model.respondContent,
                                rules: [{ required: true, message: '请填写处理结果' }]
                            })(<LimitInput placeholder="请输入" maxLength={500} area showNumber />)}
                        </Form.Item>
                    </Form>
                </Spin>
            </Modal>
        );
    })
);

/**
 * 结果记录
 * @param operateRecord
 * @param setOperateRecord
 * @param search
 */
const useDealWith = (operateRecord, setOperateRecord, search) => {
    const [showDealWith, setShowDealWith] = useState(false);

    const onShowDealWith = record => {
        setShowDealWith(true);
        setOperateRecord(record);
    };

    const onDealWith = (formValues, form, record, setModalLoading) => {
        form.validateFieldsAndScroll(errors => {
            if (errors) {
                return;
            }
            setModalLoading(true);
            dealWith({ id: record.id, ...formValues })
                .then(response => {
                    if (!isSuccess(response)) {
                        message.error(response.msg);
                        return;
                    }
                    message.success('处理成功');
                    search();
                    setShowDealWith(false);
                })
                .finally(() => setModalLoading(false));
        });
    };

    return {
        onShowDealWith,
        onDealWith,
        render() {
            return (
                <>
                    <If condition={showDealWith}>
                        <DealWithModal
                            visible={showDealWith}
                            onOk={onDealWith}
                            onCancel={() => setShowDealWith(false)}
                            model={operateRecord}
                        />
                    </If>
                </>
            );
        }
    };
};
export default useDealWith;
